<template>
  <div class="goodsparams">
    <el-card>
      <!-- 信息提示 -->
       <el-alert
               title="注意：只允许为第三级分类设置相关参数！"
               type="warning"
               :closable="false"
               show-icon
               effect="dark">
            </el-alert>
      <div class="block">
        <span class="demonstration">选择商品分类:</span>
        <el-cascader
          clearable
          @change="handleChange"
          v-model="value"
          :options="result"
          :props="{
            expandTrigger: 'hover',
            label: 'cat_name',
            value: 'cat_id',
          }"
        ></el-cascader>
      </div>
      
      <!-- tab切换 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="only">
          <el-button
            type="primary"
            :disabled="disabled"
            @click="dialogadd = true"
            >添加</el-button
          >
          <!-- 动态参数表格 -->
          <el-table :data="onlytableData" style="width: 100%">
            <el-table-column type="expand" class="slot">
              <template slot-scope="props">
                <!-- tag -->
                <el-tag
                  :key="tag"
                  v-for="tag in props.row.attr_vals"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(props.row,tag)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="props.row.inputVisible"
                  v-model="props.row.inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm(props.row)"
                  @blur="handleInputConfirm(props.row)"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput(props.row)"
                  >+ New Tag</el-button
                >
              </template>
            </el-table-column>
            <el-table-column label="#" type="index"> </el-table-column>
            <el-table-column label="商品名称" prop="attr_name">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="edit(scope.row)"
                  >编辑</el-button
                >
                <el-button type="danger" @click="del(scope.row)">
                  删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="many">
          <el-button
            type="primary"
            :disabled="disabled"
            @click="dialogadd = true"
            >添加</el-button
          >
          <!-- 动态参数表格 -->
          <el-table :data="manytableData" style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-tag
                  :key="tag"
                  v-for="tag in props.row.attr_vals"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(props,rowtag)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="props.row.inputVisible"
                  v-model="props.row.inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm(props.row)"
                  @blur="handleInputConfirm(props.row)"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput(props.row)"
                  >+ New Tag</el-button
                >
              </template>
            </el-table-column>
            <el-table-column label="#" type="index"> </el-table-column>
            <el-table-column label="商品名称" prop="attr_name">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="edit(scope.row)"
                  >编辑</el-button
                >
                <el-button type="danger" @click="del(scope.row)">
                  删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>


      <!-- 添加模态框 -->
      <el-dialog title="添加属性" :visible.sync="dialogadd" width="50%">
        <el-form ref="form" :model="addform" label-width="80px">
          <el-form-item label="动态参数">
            <el-input v-model="addform.attr_name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="add">确定</el-button>
            <el-button @click="reset">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 修改模态框 -->
      <el-dialog title="修改参数" :visible.sync="dialogedit" width="50%">
        <el-form ref="form" :model="editform" label-width="80px">
          <el-form-item label="动态参数">
            <el-input v-model="editform.attr_name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="isedit">确定</el-button>
            <el-button @click="reset">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { goodsAdministration,parameterList,addParameterList,deleteParameterList,editParameterList,} from "@/utils/goods";
export default {

  created() {
    this.rander();
  },
  data() {
    return {
      editform: {
        attr_name: "",
      }, //编辑表单
      editid: {
        id: null,
        attrId: null,
      },//编辑模态框
      dialogedit: false, 
      //添加模态框
      dialogadd: false, 
      addform: {
        attr_name: "",
      }, //添加表单
      //only 动态表格
      onlytableData: [], 
      manytableData: [], //manyt 静态表格
      activeName: "only",
      value: [], //选中的级联选择器  
      result: [], //级联选择器
      page: {
        type: [1, 2, 3],
        pagenum: 1,
        pagesize: 5,
      },
    };
  },
  computed: {
    disabled() {
      if (this.value.length === 3) {
        return false;
      } else {
        return true;
      }
    },
  },
  methods: {
    //删除参数
    del(row) {
      let id = row.cat_id;
      let attrid = row.attr_id;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteParameterList(id, attrid).then((res) => {
            this.addtable();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑事件
    edit(row) {
      this.dialogedit = true;
      this.editform = { ...row };
      this.editid.id = row.cat_id;
      this.editid.attrId = row.attr_id;
    },
    //编辑确定事件
    isedit() {
      let obj = {
        id: this.editid.id,
        attrId: this.editid.attrId,
        attr_name: this.editform.attr_name,
        attr_sel: this.activeName,
      };
      editParameterList(obj).then((res) => {
        this.dialogedit = false;
        this.editform.attr_name = "";
        this.addtable();
      });
    },
    //添加确定事件
    add() {
      let obj = {
        id: this.value[2],
        attr_name: this.addform.attr_name,
        attr_sel: this.activeName,
      };
      addParameterList(obj).then((res) => {
        this.addform.attr_name = "";
        this.dialogadd = false;
        this.addtable()
      });
    },
    //添加模态框取消事件
    reset() {
      this.dialogadd = false;
      this.addform.attr_name = "";
    },
    //删除标签
    handleClose(row,tag) {
      row.attr_vals.splice(row.attr_vals.indexOf(tag), 1);
         let obj = {
          id: row.cat_id,
          attrId: row.attr_id,
          attr_name: row.attr_name,
          attr_sel: this.activeName,
          attr_vals: row.attr_vals.join(","),
        };
        editParameterList(obj).then((res) => {
        });
    },
    //tag点击出现输入框
    showInput(row) {
      row.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.focus();
      });
    },
    //输入框回车 失焦 触发的事件
    handleInputConfirm(row) {
      let inputValue = row.inputValue;
      if (inputValue) {
        row.attr_vals.push(inputValue);
        let obj = {
          id: row.cat_id,
          attrId: row.attr_id,
          attr_name: row.attr_name,
          attr_sel: this.activeName,
          attr_vals: row.attr_vals.join(","),
        };
        editParameterList(obj).then((res) => {
        });
      }
      row.inputVisible = false;
      row.inputValue = "";
    },
    //封装添加表格
    addtable() {
      let obj = {
        id: this.value[this.value.length - 1],
        sel: this.activeName,
      };
      parameterList(obj).then((res) => {
        if (this.activeName == "only") {
          this.onlytableData =[]
          res.data.data.forEach((item) => {
            (item.inputVisible = false),
              (item.inputValue = ""),
              item.attr_vals = item.attr_vals? item.attr_vals.split(",") : []
            this.onlytableData.push(item);
          })
        } else {
          this.manytableData =[]
          res.data.data.forEach((item) => {
            (item.inputVisible = false),
              (item.inputValue = ""),
               item.attr_vals = item.attr_vals? item.attr_vals.split(",") : []
            this.manytableData.push(item);
          });
        }
      });
    },
    handleChange() {
      // console.log(this.value);
      let arr = this.value;
      if (arr.length != 3) {
        this.value = [];
        this.$message.error("只能选中三级参数");
        this.onlytableData = [];
        this.manytableData = [];
        return false;
      }
      this.addtable();
    },
    handleClick() {
      if (this.value.length == 3) {
        this.addtable()
      }
    },
    rander() {
      goodsAdministration(this.page).then((res) => {
        this.result = res.data.data.result;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.slot {
  width: 100%;
  display: flex;
  align-items: center;
}
.input-new-tag {
  width: 80px;
}
</style>